<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>教师列表</title>
		<link rel="stylesheet" href="js/bootstrap-3.4.1-dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="js/bootstrap-3.4.1-dist/css/bootstrap-theme.css" />
		<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript" src="js/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
		
		

		<script>
			/**
			 * dom加载完成之后，自动执行
			 */
			$(function() {
				let adminHome = new AdminHome();

				// 获取教师列表数据
				adminHome.queryAll(null);
				//初始化模态框
				adminHome.initModal();
				// 初始化点击事件
				adminHome.click();
			})

			class AdminHome {
				constructor() {}

				/**
				 * 修改老师信息
				 * @returns {boolean}
				 */
				save() {
					let that = this;
					// 非空校验
					let userId = $("#userId").val();
					let depId = $("#depId").val();
					let username = $("#username").val();
					let nickname = $("#nickname").val();
					let gender = $("input[name=gender]:checked").val();
					let phone = $("#phone").val();
					let rank = $("#rank option:selected").val();
					let email = $("#email").val();
					let role = $("#role").val();
					console.log(depId, username, nickname, gender, phone, rank, email);
					// 进行非空校验
					if (!nickname || nickname === '') {
						bootoast({
							message: '姓名不能为空！',
							type: 'danger',
							position: 'top',
							timeout: 2
						});
						return false;
					}
					if (!gender || gender === '') {
						bootoast({
							message: '性别不能为空！',
							type: 'danger',
							position: 'top',
							timeout: 2
						});
						return false;
					}
					if (!phone || phone === '') {
						bootoast({
							message: '手机不能为空！',
							type: 'danger',
							position: 'top',
							timeout: 2
						});
						return false;
					}
					if (!rank || rank === '') {
						bootoast({
							message: '职称不能为空！',
							type: 'danger',
							position: 'top',
							timeout: 2
						});
						return false;
					}
					console.log(
						`userId=${userId}&depId=${depId}&username=${username}&nickname=${nickname}&gender=${gender}&phone=${phone}&rank=${rank}&email=${email}&role=${role}`
						);
					// 提交表单
					$.ajax({
						type: 'post', // 提交方式 post
						url: $("#myForm").attr("action"), // /pm/user/update
						cache: false, // 不启用缓存
						data: `userId=${userId}&depId=${depId}&username=${username}&nickname=${nickname}&gender=${gender}&phone=${phone}&rank=${rank}&email=${email}&role=${role}`,
						dataType: 'json', // 期望服务器响应的数据类型 json
						success: function(result) { // 响应成功就会自动执行该方法，result中封装的是响应的结果
							console.log(result);
							// 提示
							bootoast({
								message: result.msg,
								type: 'success',
								position: 'top',
								timeout: 2
							});
							// 更新列表
							that.queryAll(null);
							// 关闭修改模态框
							$('#exampleModal').modal('hide')
						},
						error: function(error) { // 响应失败就会自动执行该方法，error中封装的是错误信息
							// 提示
							bootoast({
								message: '服务器请求错误！',
								type: 'danger',
								position: 'top',
								timeout: 2
							});
						}

					})
					return true;
				}

				/**
				 * 根据关键字从服务端获取教师列表信息
				 * @param keywords
				 * @param flag：首页：homePage,尾页：endPage,上一页：prePage,下一页：nextPage
				 * @param page：分页数据
				 */
				queryAll(keywords, flag, page) {
					if (!keywords) {
						keywords = "";
					}
					// 为了防止添加的数据重复，所以需要清空之前添加的数据
					$(".table tbody").empty();
					// 根据情况组装url
					let url = `/pm/user/queryAll?keywords=${keywords}&role=1`
					if (flag && page) {
						switch (flag) {
							case 'homePage': // 首页
								url = `/pm/user/queryAll?keywords=${keywords}&currentPage=1&role=1`
								break;
							case 'endPage': // 尾页
								url = `/pm/user/queryAll?keywords=${keywords}&currentPage=${page.totalPage}&role=1`
								break;
							case 'prePage': // 上一页
								url = `/pm/user/queryAll?keywords=${keywords}&currentPage=${page.prePage}&role=1`
								break;
							case 'nextPage': // 下一页
								url = `/pm/user/queryAll?keywords=${keywords}&currentPage=${page.nextPage2}&role=1`
								break;
						}
					}
					// 测试数据
					for (let i = 0; i < 5; i++) {
						$(`
                        <tr>
                            <td class="text">1</td>
                            <td class="text">教学部</td>
                            <td class="text">T10000</td>
                            <td class="text">张老师</td>
                            <td>
                                <img src="static/img/pic7.jpeg" alt="" class="img-circle" style="width:40px;">
                            </td>
                            <td class="text">男</td>
                            <td class="text">13800000000</td>
                            <td class="text">教授</td>
                            <td class="text">6666666@qq.com</td>
                            <td class="text">
                                <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal" data-userid=1
                                    data-username=T10000 data-nickname=张老师 data-gender=男
                                    data-phone=13800000000 data-rank=教授 >编辑</button>
                                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal" data-userid=1>删除</button>
                            </td>
                        </tr>
                        `).appendTo($(".table tbody"))
					}
					// 我们在前端访问服务端接口使用jQuery提供的ajax
					$.ajax({
						type: 'GET', // 提交方式，跟接口规定的一致
						url: url, // url服务端的接口地址
						cache: false, // 不启用缓存
						dataType: 'json', // 期望后端返回的数据的类型
						success: function(res) { // success,成功响应后自动执行，res封装后端响应回来的信息
							console.log("返回教师列表信息", res)
							if (res.code == 1) { // 数据查询成功
								// 判断后端是否传过来列表数据
								if (res.result && res.result.length > 0) { // 有数据
									// 遍历教师数据
									for (let teacher of res.result) {
										if (teacher.role == 1) {
											$(`
                                      <tr>
                                        <td class="text">${teacher.userId}</td>
                                        <td class="text">${teacher.depId}</td>
                                        <td class="text">${teacher.username}</td>
                                        <td class="text">${teacher.nickname}</td>
                                        <td>
                                            <img src="static/img/touxiang.png" alt="" class="img-circle" style="width:40px;">
                                        </td>
                                        <td class="text">${teacher.gender}</td>
                                        <td class="text">${teacher.phone}</td>
                                        <td class="text">${teacher.rank}</td>
                                        <td class="text">${teacher.email}</td>

                                        <td class="text">
                                            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal" data-userid=${teacher.userId}
                                    data-username=${teacher.username} data-nickname=${teacher.nickname} data-gender=${teacher.gender}
                                    data-phone=${teacher.phone} data-rank=${teacher.rank} data-email=${teacher.email} data-depid=${teacher.depId}>编辑</button>
                                            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal" data-userid=${teacher.userId}>删除</button>
                                        </td>
                                      </tr>
                                    `).appendTo($(".table tbody"))
										}
									}
								} else { // 无数据
									$(`
                                  <tr>
                                      <td colspan="10" style="text-align: center;border:none;padding: 10% 0;">当前没有查询到数据！</td>
                                  </tr>
                                `).appendTo($(".table tbody"))
								}
								// 处理分页数据（）
								if (res.page) {
									$("#pagination").empty();
									$("#pagination").append($(`
                                <li><a href="javascript:void(0);" id="homePage">首页</a></li>
                                <li><a href="javascript:void(0);" id="prePage">上一页</a></li>
                                <li><a href="javascript:void(0);" id="nextPage">下一页</a></li>
                                <li><a href="javascript:void(0);" id="endPage">尾页</a></li>
                                <li style="border: none;margin-left: 20px;" disabled>
                                    <span style="color:#888 !important;">当前第<strong style="color: #337ab7">${res.page.currentPage}</strong>页，共<strong style="color: #337ab7">${res.page.totalPage}</strong>页</span>
                                </li>
                                `))
									// 因为这里是动态+异步，所以需要动态传参
									$("#homePage").click(function() {
										pageClick('homePage', res.page)
									})
									$("#endPage").click(function() {
										pageClick('endPage', res.page)
									})
									$("#prePage").click(function() {
										pageClick('prePage', res.page)
									})
									$("#nextPage").click(function() {
										pageClick('nextPage', res.page)
									})

								}
							} else { // 数据查询失败

							}
						},
						error: function(err) {
							console.log("Error=>", err);
						}
					})
				}

				/**
				 * 管理所有的点击事件
				 */
				click() {
					// 点击事件中，无法获取到对象中的this
					let that = this;
					$("#searchBtn").click(function() {
						// 获取搜索输入框中内容
						let keywords = $("#searchValue").val();
						// 访问服务器
						that.queryAll(keywords);

					})

					//提交表单
					$("#save-btn").click(function() {
						that.save();
					})
					// 删除教师
					$("#del-btn").click(function() {
						// 获取userId
						let userId = $("#userId2").val()

						if (userId) {
							$.ajax({
								type: 'get', // 请求方式
								url: '/pm/user/delete?userId=' + userId, // 请求url
								cache: false, // 缓存
								dataType: 'json', // 期望服务端返回的类型
								success: function(res) { // res = {code:数值,msg:'字符串',result:[]/{}}
									console.log("信息", res.code)
									if (res.code == 1) { // 删除成功
										bootoast({
											message: res.msg,
											type: 'success',
											position: 'top',
											timeout: 2 // 2秒之后消失
										});
									} else { // 删除失败
										bootoast({
											message: res.msg,
											type: 'danger',
											position: 'top',
											timeout: 2
										});
									}
									// 更新列表
									that.queryAll(null);
									// 关闭修改模态框
									$('#deleteModal').modal('hide')
								},
								error: function(err) {
									console.log("teacher-delete---Error=>", err)
									bootoast({
										message: '服务器响应异常',
										type: 'danger',
										position: 'top',
										timeout: 2
									});
								}
							})
						}

					})
				}
				/**
				 * 管理模态框
				 */
				initModal() {
					// 处理修改模态框
					$('#exampleModal').on('show.bs.modal', function(event) {
						// 获取修改按钮
						let button = $(event.relatedTarget) // Button that triggered the modal
						// 接收传递的数据，数据是在 编辑 按钮上通过 data-属性名 的方式传递
						//------------------------------------------------------------------改动开始1
						let userId = button.data('userid');
						let username = button.data('username');
						let nickname = button.data('nickname');
						let gender = button.data('gender');
						let phone = button.data('phone');
						let rank = button.data('rank');
						let email = button.data('email');
						let depId = button.data('depid');
						//------------------------------------------------------------------改动结束1
						let modal = $(this)
						//------------------------------------------------------------------改动开始2
						// 给模态框中的表单绑定数据（处理常规的input标签）
						modal.find('.modal-body #userId').val(userId)
						modal.find('.modal-body #username').val(username)
						modal.find('.modal-body #nickname').val(nickname)
						modal.find('.modal-body #phone').val(phone)
						modal.find('.modal-body #nickname').val(nickname)
						modal.find('.modal-body #email').val(email)
						modal.find('.modal-body #depId').val(depId)
						// 处理性别(单选按钮)
						modal.find(`.modal-body input[name=gender][value=${gender}]`).attr("checked", true);
						// 处理职称（下拉框）
						modal.find(`.modal-body #manager option[value=${rank}]`).attr("selected", true);

					})
					// 处理删除模态框
					$('#deleteModal').on('show.bs.modal', function(event) {
						// 获取修改按钮
						let button = $(event.relatedTarget) // Button that triggered the modal
						// 接收传递的数据，数据是在 编辑 按钮上通过 data-属性名 的方式传递
						//------------------------------------------------------------------改动开始1
						let userId = button.data('userid'); // 绿色key对应data-key
						//------------------------------------------------------------------改动结束1
						let modal = $(this)
						//------------------------------------------------------------------改动开始2
						// 给模态框中的表单绑定数据（处理常规的input标签）
						modal.find('.modal-body #userId2').val(userId)
						//------------------------------------------------------------------改动结束2
					})
				}

			}

			/**
			 * 分页按钮点击事件
			 * @param option
			 */
			function pageClick(flag, page) {
				let keywords = $("#searchValue").val();
				let adminHome = new AdminHome();
				adminHome.queryAll(keywords, flag, page)
			}
		</script>
	</head>

	<body>
		<div class="container-fluid my-container">
			<!-- 页头 -->
			<ol class="breadcrumb" style="margin-top: 5px;">
				<li><a href="wellcome.html">主页</a></li>
				<li><a href="#">教师管理</a></li>
				<li class="active">教师列表</li>
			</ol>
			<!-- 搜索框 -->
			<form class="form-inline">
				<div class="form-group">
					<input type="text" class="form-control" id="searchValue" placeholder="请输入关键字">
				</div>
				<button type="button" class="btn btn-primary" id="searchBtn">搜索</button>
				<button type="button" class="btn btn-danger">批量删除</button>
			</form>
			<div class="panel panel-default" style="margin-top: 10px;">
				<div class="panel-heading">
					<h3 class="panel-title">操作面板</h3>
				</div>
				<div class="panel-body">
					<!-- 表格 -->
					<table class="table table-hover table-condensed" style="margin-top: 10px;">
						<thead>
							<tr class="info">
								<th>编号</th>
								<th>部门</th>
								<th>工号</th>
								<th>姓名</th>
								<th>头像</th>
								<th>性别</th>
								<th>手机</th>
								<th>职称</th>
								<th>邮箱</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>

						</tbody>
					</table>
					<!-- 分页组件 -->
					<nav aria-label="Page navigation">
						<ul class="pagination" id="pagination">
							<!--            <li>-->
							<!--              <a href="#" aria-label="Previous">-->
							<!--                <span aria-hidden="true">&laquo;</span>-->
							<!--              </a>-->
							<!--            </li>-->
							<!--            <li><a href="#">1</a></li>-->
							<!--            <li><a href="#">2</a></li>-->
							<!--            <li><a href="#">3</a></li>-->
							<!--            <li><a href="#">4</a></li>-->
							<!--            <li><a href="#">5</a></li>-->
							<!--            <li>-->
							<!--              <a href="#" aria-label="Next">-->
							<!--                <span aria-hidden="true">&raquo;</span>-->
							<!--              </a>-->
							<!--            </li>-->
						</ul>
					</nav>
				</div>

			</div>

			<!-- 尾部 -->
			<div class="footer">技术支持：计科1902掘金少年</div>
		</div>
		<!-- 模态框 老师信息展示与修改-->
		<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="exampleModalLabel"
							style="border-left: 5px solid dodgerblue;padding-left: 10px;">
							编辑教师信息</h4>
					</div>
					<div class="modal-body">
						<!-- 表单 -->
						<div class="myform">
							<form id="myForm" action="/pm/user/update" method="post">
								<div class="form-group">
									<label for="userId">编<span
											style="color:transparent;user-select: none;">隐藏</span>号：</label>
									<input type="text" class="form-control" name="userId" id="userId" readonly>
								</div>
								<div class="form-group">
									<label for="depId">部门编号：<span
											style="color:transparent;user-select: none;">隐藏</span></label>
									<input type="text" class="form-control" name="depId" id="depId" readonly>
								</div>
								<div class="form-group">
									<label for="username">工<span
											style="color:transparent;user-select: none;">隐藏</span>号：</label>
									<input type="text" class="form-control" name="username" id="username" readonly>
								</div>
								<div class="form-group">
									<!--姓名-->
									<label for="nickname">姓<span
											style="color:transparent;user-select: none;">隐藏</span>名：</label>
									<input type="text" class="form-control" name="nickname" id="nickname"
										placeholder="请输入姓名">
								</div>
								<!--性别 单选按钮-->
								<div class="form-group">
									<label>性<span style="color:transparent;user-select: none;">隐藏</span>别：</label>
									<div class="radio">
										<label>
											<input type="radio" name="gender" id="optionsRadios1" value="男">
											男
										</label>
										&nbsp;&nbsp;
										<label>
											<input type="radio" name="gender" id="optionsRadios2" value="女">
											女
										</label>
									</div>
								</div>
								<!--手机号-->
								<div class="form-group">
									<label for="phone">手<span
											style="color:transparent;user-select: none;">隐藏</span>机：</label>
									<input type="text" class="form-control" name="phone" id="phone"
										placeholder="请输入手机号">
								</div>
								<!--职称-->
								<div class="form-group">
									<label for="rank">职<span
											style="color:transparent;user-select: none;">隐藏</span>称：</label>
									<select class="form-control" id="rank">
										<option class="disabled" disabled>请选择职称</option>
										<option value="教授">教授</option>
										<option value="副教授">副教授</option>
										<option value="讲师">讲师</option>
										<option value="助教">助教</option>
									</select>
								</div>

								<!--邮箱-->
								<div class="form-group">
									<label for="email">邮<span
											style="color:transparent;user-select: none;">隐藏</span>箱：</label>
									<input type="text" class="form-control" name="email" id="email" placeholder="请输入邮箱">
								</div>
								<!-- 角色 -->
								<input type="hidden" class="form-control" name="role" id="role" value="1">
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary" id="save-btn">保存</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 模态框：实现教师信息的删除-->
		<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="exampleModalLabel2"
							style="border-left: 5px solid dodgerblue;padding-left: 10px;">
							温馨提示</h4>
					</div>
					<div class="modal-body">
						确定删除当前教师？
						<!-- 这里需要使用隐藏域绑定一个主键编号：所谓隐藏域，就是程序中能够读到，用户却看不见-->
						<input type="hidden" id="userId2">
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" id="del-btn">确认</button>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>
